<template>
	<view>

		<view class="status_bar"></view>
		<u-sticky :h5-nav-height="0" class="index__top" bg-color="none" @fixed="stickTop=true" @unfixed="stickTop=false">
			<view @click="choosePark()" class="status_bar" v-if="this.stickTop"></view>
			<view class="index__top--bg" v-if="this.stickTop">
				<p class="index__top__area">{{currentPark.parkName}}<u-icon name="arrow-down-fill" size="10" style="margin-left: 10rpx;">
					</u-icon>
				</p>
			</view>
			<view  @click="choosePark()" class="index__top--nonebg" v-else>
				<p class="index__top__area">{{currentPark.parkName}}<u-icon name="arrow-down-fill" size="10" style="margin-left: 10rpx;">
					</u-icon>
				</p>
			</view>
		</u-sticky>
		
		<view>	
			<u-swiper :list="store.state.swiperList" mode="round" indicator-pos="bottomRight" height="440"></u-swiper>
		</view>
		<view class="index__func">
			<u-grid :col="4" :border="false">
				<u-grid-item >
					<image class="index__func__icon" src="/static/service/approve.svg" mode="aspectFit"></image>
					<view class="grid-text" @click="testMethods">审批审核</view>
				</u-grid-item>
				<u-grid-item>
					<image class="index__func__icon" src="/static/service/notice.svg" mode="aspectFit"></image>
					<u-badge count="10" :offset="[20, 20]"></u-badge>
					<view class="grid-text">公告通知</view>
				</u-grid-item>
				<u-grid-item>
					<image class="index__func__icon" src="/static/service/office-shopping.svg" mode="aspectFit"></image>
					<view class="grid-text">办公采买</view>
				</u-grid-item>
				<u-grid-item>
					<image class="index__func__icon" src="/static/service/bill.svg" mode="aspectFit"></image>
					<view class="grid-text">物业账单</view>
				</u-grid-item>
				<u-grid-item>
					<image class="index__func__icon" src="/static/service/meeting.svg" mode="aspectFit">
					</image>
					<view class="grid-text">预约会议</view>
				</u-grid-item>
				<u-grid-item>
					<image class="index__func__icon" src="/static/service/more.svg" mode="aspectFit"></image>
					<view class="grid-text">更多</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="index__article">
			<u-sticky :h5-nav-height="0" :offset-top="90" @fixed="stickArticleTabs=true" @unfixed="stickArticleTabs=false">
				<view class="status_bar" v-if="this.stickArticleTabs"></view>
				<view>
					<u-tabs-swiper ref="uTabs" :list="store.state.tabsList" :current="store.state.tabsCurrent"
						@change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
				</view>
			</u-sticky>
			<swiper :current="store.state.tabsSwiperCurrent" @transition="transition" @animationfinish="animationfinish"
				class="index__article__list">
				<swiper-item class="swiper-item" >
					<scroll-view scroll-y @scrolltolower="onreachBottom">
						<view></view>
						<v-articleBox @click.native="viewArticle(artInfo.articleId)" v-for="(artInfo, index) in articleList" :title="artInfo.title"
							:summary="artInfo.text" :isTop="false" :readNum="artInfo.viewNum"
							pubdate="2021-05-02 17:08:27" :imgList="artInfo.coverImageUrl" >
						</v-articleBox>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>

		<u-tabbar :list="this.$store.state.tabbarList" 
			:active-color="this.$store.state.tabbarConfig.activeColor"
			:inactive-color="this.$store.state.tabbarConfig.inactiveColor"
			:border-top="this.$store.state.tabbarConfig.borderTop"	></u-tabbar>
	</view>
</template>

<script>
	import store from './store.js'
	import articleBox from '../../../component/articleBox'

	export default {
		components: {
			'v-articleBox': articleBox,
		},
		data() {
			return {
				store: store,
				stickTop: false,
				stickArticleTabs:false,
				articleCurPage:1,
				articlePageSize:10,
				articleList:[]
			}
		},
		created(){
				uni.$on("parkChange",(park)=>{
					console.log("parkChange",park)
					this.getArticle()
				})
		},
		computed:{
			currentPark(){
				return this.$store.state.currentPark
			}
		},
		mounted(){
			console.log("this.$store.state.currentPark",this.$store.state.currentPark)
			this.getArticle()
		},
		methods: {
			choosePark(){
				// console.log("chosePark")
				uni.navigateTo({
					url:"/pages/core/index/choosePark"
				})
			},
			getArticle(){
				// 
				let articleData={
					pageSize:this.articlePageSize,
					pageNum:this.articleCurPage,
					// parkId:this.$store.state.currentPark.id,
					 parkId:123456,
					articleType:store.state.tabsCurrent+1,
				}
				this.$Axios({
					url:this.$store.state.baseURL+"/article/list",
					method:"post",
					data:articleData
				}).then(response=>{
					if(response.data.state=="success"){
						this.articleList=response.data.msg.data
					}
				})
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.store.state.tabsSwiperCurrent = index;
				this.getArticle()
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.store.state.tabsSwiperCurrent = current;
				this.store.state.tabsCurrent = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			},
			viewArticle(id){
				this.$Router.push({
					path:"/pages/core/index/viewArticle",
					query:{articleId:id}
				})
			}
		}
	}
</script>
<style lang="less">
	.index {
		&__top {
			position: absolute;
			left: 0px;
			top: var(--status-bar-height);
			right: 0px;
			z-index: 1000;
			&--bg{
				background-color: #FFFFFF;
				transition: all 0.4s;
			}
			&--nonebg{
				background-color: none;
			}
			&__area {
				padding: 30rpx;
			}
		}

		&__func {
			margin-top: 20rpx;
			margin-bottom: 20rpx;

			&__icon {
				width:@func-icon-size-base;
				height: @func-icon-size-base;
				margin-left: 50rpx;
				margin-right: 50rpx;
			}
		}

		&__article {
			display: flex;
			flex-direction: column;
			height: calc(100vh);

			&__list {
				flex: 1;
			}
		}
	}
</style>
<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #FFFFFF;
	}
</style>
